<!--<h2 class="page-title">工程配置</h2>-->
<!--<hr>-->


<div style="padding: 0.6rem 2% 0 2%">
  <nz-tabset  >
    <nz-tab *ngFor="let tab of room" (nzSelect)="refresh_table(tab)">
      <ng-template #nzTabHeading >
        <div>
          {{tab.num}}房间
          <!--<i class="anticon anticon-cross" (click)="closeTab(tab)"></i>-->
        </div>
      </ng-template>
      <p class="title">{{data.edit_project_name}}&nbsp;&nbsp;{{tab.num}}房间控件配置表&nbsp;&nbsp;<span class="desc">({{tab.desc}})</span></p>
    </nz-tab>
    <!--<ng-template #nzTabBarExtraContent>-->
      <!--<button nz-button  [nzType]="'primary'"  (click)="show_modal('room')" style="margin-right: 1rem;">添加房间</button>-->
    <!--</ng-template>-->
  </nz-tabset>

  <div  style="margin-bottom: 16px;">
    <div style="display: inline-block">
      <button id="new" nz-button [disabled]="" [nzType]="'primary'"  (click)="show_modal('controller')" >添加控件</button>
      <button nz-button [disabled]="_checkedNumber != 1" [nzType]="'primary'"  (click)="show_modal('modify')">修改配置</button>

      <nz-popconfirm [nzTitle]="'确定要删除选中控件吗？'" (nzOnConfirm)="delete_config()" (nzOnCancel)="cancel_delete()" [nzPlacement]="'bottom'">
        <button nz-button  nz-popconfirm  [disabled]="_checkedNumber < 1" [nzType]="'primary'"   >删除控件</button>
      </nz-popconfirm>
      <span style="margin-left: 8px;" *ngIf="_checkedNumber">已选择 {{_checkedNumber}} 个控件</span>
    </div>


    <div style="display: inline-block;float: right;margin-left: 5px">
      <button nz-button [nzType]="'primary'" [nzSize]="'large'"  (click)="export_controller()" >导出JSON</button>
    </div>

    <div style="display: inline-block;float: right;margin-left: 5px">
      <button nz-button [nzType]="'primary'" [nzSize]="'large'"  (click)="export_esf()" >导出ESF</button>
    </div>

    <div  style="display: inline-block;width: 56px;float: right">
      <div class="project-btn import_btn"  >
        <label for="file" class="import_label" style="color: white;position: absolute;top:5px;left: 16px;font-size: 0.9rem">导入</label>
        <input type="file" id="file" name="controller_file"  (change)="import_controller()" >
      </div>
    </div>
  </div>


  <nz-table #nzTable [nzDataSource]="config" [nzPageSize]="10" (nzDataChange)="_displayDataChange($event)" (nzPageIndexChange)="_refreshStatus()" (nzPageSizeChange)="_refreshStatus()">
    <thead nz-thead>
    <tr>
      <th nz-th nzCheckbox>
        <label nz-checkbox [(ngModel)]="_allChecked" [nzIndeterminate]="_indeterminate" (ngModelChange)="_checkAll($event)">
        </label>
      </th>
      <th nz-th><span>Id</span></th>
      <th nz-th><span>Type</span></th>
      <th nz-th><span>Name</span></th>
      <th nz-th><span>Address</span></th>
      <th nz-th><span>Data Type</span></th>
      <th nz-th><span>Value</span></th>
      <th nz-th><span>Room</span></th>
      <th nz-th><span>Room Desc</span></th>
      <th nz-th><span>Priority</span></th>
    </tr>
    </thead>
    <tbody nz-tbody>
    <tr nz-tbody-tr *ngFor="let data of nzTable.data">
      <td nz-td nzCheckbox>
        <label nz-checkbox [(ngModel)]="data.checked" (ngModelChange)="_refreshStatus($event)">
        </label>
      </td>
      <td nz-td>{{data.id}}</td>
      <td nz-td>{{data.type}}</td>
      <td nz-td>{{data.name}}</td>
      <td nz-td>{{data.address}}</td>
      <td nz-td>{{data.data_type}}</td>
      <td nz-td>{{data.value}}</td>
      <td nz-td>{{data.room}}</td>
      <td nz-td>{{data.room_desc}}</td>
      <td nz-td>{{data.priority}}</td>
    </tr>
    </tbody>
  </nz-table>
</div>




<nz-modal [nzVisible]="is_new_controller" [nzTitle]="'新建控件'" [nzContent]="newcontroller" (nzOnCancel)="cancel_modal('controller')" (nzOnOk)="add_controller()" class="project-modal" >
  <ng-template #newcontroller>
    <div nz-row  class="form-row">
      <div nz-col [nzLg]="{ span: 6}"><label  class="label-name" style="padding-top:0">控件类型</label></div>
      <div nz-col [nzLg]="{ span: 16}">
        <nz-select style="width: 50%;" [(ngModel)]="selected_type"  >
          <nz-option
            *ngFor="let option of type_options"
            [nzLabel]="option.label"
            [nzValue]="option" >
          </nz-option>
        </nz-select>
      </div>
    </div>
    <div nz-row class="form-row">
      <div nz-col [nzLg]="{ span: 6}"><label  class="label-name">名称:</label></div>
      <div nz-col [nzLg]="{ span: 16}"><nz-input   [(ngModel)]="new_controller.name"></nz-input></div>
    </div>
    <div nz-row  class="form-row">
      <div nz-col [nzLg]="{ span: 6}"><label  class="label-name">组地址</label></div>
      <div nz-col [nzLg]="{ span: 16}"><nz-input   [(ngModel)]="new_controller.address"  [nzPlaceHolder]="'0/0/0'"></nz-input></div>
    </div>
    <div nz-row  class="form-row">
      <div nz-col [nzLg]="{ span: 6}"><label  class="label-name" style="padding-top:0">数据类型</label></div>
      <div nz-col [nzLg]="{ span: 16}">
        <nz-select style="width: 50%;" [(ngModel)]="selected_data"  >
          <nz-option
            *ngFor="let option of data_options"
            [nzLabel]="option.label"
            [nzValue]="option" >
          </nz-option>
        </nz-select>
      </div>
    </div>
    <div nz-row  class="form-row">
      <div nz-col [nzLg]="{ span: 6}"><label  class="label-name">值</label></div>
      <div nz-col [nzLg]="{ span: 16}"><nz-input   [(ngModel)]="new_controller.value"  ></nz-input></div>
    </div>
    <div nz-row  class="form-row">
      <div nz-col [nzLg]="{ span: 6}"><label  class="label-name">房间号</label></div>
      <div nz-col [nzLg]="{ span: 16}"><nz-input   [(ngModel)]="new_controller.room"></nz-input></div>
    </div>
    <div nz-row  class="form-row">
      <div nz-col [nzLg]="{ span: 6}"><label  class="label-name">房间描述</label></div>
      <div nz-col [nzLg]="{ span: 16}"><nz-input   [(ngModel)]="new_controller.room_desc"></nz-input></div>
    </div>
    <div nz-row  class="form-row">
      <div nz-col [nzLg]="{ span: 6}"><label  class="label-name" style="padding-top:0">优先级</label></div>
      <div nz-col [nzLg]="{ span: 16}">
        <nz-select style="width: 50%;" [(ngModel)]="selected_priority"  >
          <nz-option
            *ngFor="let option of priority_options"
            [nzLabel]="option.label"
            [nzValue]="option" >
          </nz-option>
        </nz-select>
      </div>
    </div>
  </ng-template>
</nz-modal>



<nz-modal [nzVisible]="is_modify_controller" [nzTitle]="'修改控件'" [nzContent]="changecontroller" (nzOnCancel)="cancel_modal('modify')" (nzOnOk)="change_controller()" class="project-modal" >
  <ng-template #changecontroller>
    <div nz-row  class="form-row">
      <div nz-col [nzLg]="{ span: 6}"><label  class="label-name" style="padding-top:0">控件类型</label></div>
      <div nz-col [nzLg]="{ span: 16}">
        <nz-select style="width: 50%;" [(ngModel)]="selected_type"  >
          <nz-option
            *ngFor="let option of type_options"
            [nzLabel]="option.label"
            [nzValue]="option" >
          </nz-option>
        </nz-select>
      </div>
    </div>
    <div nz-row class="form-row">
      <div nz-col [nzLg]="{ span: 6}"><label  class="label-name">名称:</label></div>
      <div nz-col [nzLg]="{ span: 16}"><nz-input   [(ngModel)]="modifying.name"></nz-input></div>
    </div>
    <div nz-row  class="form-row">
      <div nz-col [nzLg]="{ span: 6}"><label  class="label-name">组地址</label></div>
      <div nz-col [nzLg]="{ span: 16}"><nz-input   [(ngModel)]="modifying.address"  [nzPlaceHolder]="'0/0/0'"></nz-input></div>
    </div>
    <div nz-row  class="form-row">
      <div nz-col [nzLg]="{ span: 6}"><label  class="label-name" style="padding-top:0">数据类型</label></div>
      <div nz-col [nzLg]="{ span: 16}">
        <nz-select style="width: 50%;" [(ngModel)]="selected_data"  >
          <nz-option
            *ngFor="let option of data_options"
            [nzLabel]="option.label"
            [nzValue]="option" >
          </nz-option>
        </nz-select>
      </div>
    </div>
    <div nz-row  class="form-row">
      <div nz-col [nzLg]="{ span: 6}"><label  class="label-name">值</label></div>
      <div nz-col [nzLg]="{ span: 16}"><nz-input   [(ngModel)]="modifying.value" ></nz-input></div>
    </div>
    <div nz-row  class="form-row">
      <div nz-col [nzLg]="{ span: 6}"><label  class="label-name">房间号</label></div>
      <div nz-col [nzLg]="{ span: 16}"><nz-input   [(ngModel)]="modifying.room"></nz-input></div>
    </div>
    <div nz-row  class="form-row">
      <div nz-col [nzLg]="{ span: 6}"><label  class="label-name">房间描述</label></div>
      <div nz-col [nzLg]="{ span: 16}"><nz-input   [(ngModel)]="modifying.room_desc"></nz-input></div>
    </div>
    <div nz-row  class="form-row">
      <div nz-col [nzLg]="{ span: 6}"><label  class="label-name" style="padding-top:0">优先级</label></div>
      <div nz-col [nzLg]="{ span: 16}">
        <nz-select style="width: 50%;" [(ngModel)]="selected_priority"  >
          <nz-option
            *ngFor="let option of priority_options"
            [nzLabel]="option.label"
            [nzValue]="option" >
          </nz-option>
        </nz-select>
      </div>
    </div>
  </ng-template>
</nz-modal>




<!--<nz-modal [nzVisible]="is_new_room" [nzTitle]="'添加房间'" [nzContent]="addroom" (nzOnCancel)="cancel_modal('modify')" (nzOnOk)="newTab()" class="project-modal" >-->
  <!--<ng-template #addroom>-->
    <!--<div nz-row class="form-row">-->
      <!--<div nz-col [nzLg]="{ span: 6}"><label  class="label-name">房间号(数字):</label></div>-->
      <!--<div nz-col [nzLg]="{ span: 16}"><nz-input   [(ngModel)]="new_room.num"  [nzPlaceHolder]="'请输入房间号'"></nz-input></div>-->
    <!--</div>-->
    <!--<div nz-row  class="form-row">-->
      <!--<div nz-col [nzLg]="{ span: 6}"><label  class="label-name">房间描述</label></div>-->
      <!--<div nz-col [nzLg]="{ span: 16}"><nz-input   [(ngModel)]="new_room.desc"  [nzPlaceHolder]="'房间描述'"></nz-input></div>-->
    <!--</div>-->
  <!--</ng-template>-->
<!--</nz-modal>-->
